<template>
	<view class="steps-progress">
		<view class="progress-wrapper">
			<view class="current-progress" :style="{ backgroundColor: color, width: active / (list.length - 1) * 100 + '%' }"></view>
			<view class="thumb" :style="{
				borderColor: color,
				left: active / (list.length - 1) * 100 + '%',
				transform
			}"></view>
		</view>
		<view class="text flex-between">
			<view
				v-for="item in list"
				:key="item"
			>
				{{ item }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: Array,
		active: Number,
		color: String
	},
	computed: {
		transform() {
			if (this.active === 0) {
				return 'translate(0, -50%)';
			}
			if (this.active === this.list.length - 1) {
				return 'translate(-100%, -50%)';
			}
			return 'translate(-50%, -50%)';
		}
	}
}
</script>

<style lang="scss" scoped>
.steps-progress {
	.progress-wrapper {
		background-color: #ebeef1;
		height: 2px;
		margin: 40rpx 0;
		position: relative;
		
		.current-progress {
			position: absolute;
			height: 100%;
			left: 0;
			top: 0;
		}
		
		.thumb {
			position: absolute;
			width: 44rpx;
			height: 44rpx;
			border: 8rpx solid;
			background-color: #fff;
			border-radius: 50%;
			top: 50%;
		}
	}
	
	.text {
		color: #c4c9d0;
		font-size: 24rpx;
		margin: 0 -24rpx;
		
		view:first-of-type {
			transform: translateX(50%);
		}
		
		view:last-of-type {
			transform: translateX(-50%);
		}
	}
}
</style>
